<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>DTH sign up</title>
	<link type="text/css" rel="stylesheet" href="css/dth.css" />
	<style>
.login_page {
	height: 180px;
	margin-left: 34%;
	margin-top: 5%;
	width: 325px;
	background: #0F4069;
	color: #ffffff;
	border-radius: 18px;
}

#wrap {
	height: 250px;
    margin-left: 354px;
    margin-top: 85px;
    width: 400px;
}
</style>
</h:head>

<h:body>
	<p:growl id="growl" showDetail="true" sticky="false" />
	<ui:insert name="header">
		<ui:include src="/header/header_dth.xhtml" />
	</ui:insert>
	<div style="text-align: center;">
		<div class="dth_body_home">
			<div
				style="width: 100%; height: 30%; float: left; background: #ff0fff;">
				<p:imageSwitch effect="topDown">
					<p:graphicImage value="images/banner1.jpg"></p:graphicImage>
				</p:imageSwitch>
			</div>
			<div class="dth_content">
				<h:form>
					<p:ajaxStatus
						style="bottom: 68%;
				    height: 32px;
				    position: fixed;
				    right: 50%;
				    width: 32px;
				    z-index: 99999;">
						<f:facet name="start">
							<p:graphicImage value="images/loading.gif" />
						</f:facet>
						<f:facet name="complete">
							<h:outputText value="" />
						</f:facet>
					</p:ajaxStatus>
					<div style="width: 100%;height: 60px;">
						<p:graphicImage value="images/signup.jpg"></p:graphicImage>
					</div>
					<div id="wrap">
						<h:panelGroup id="dlgisert">
							<h:inputHidden value="#{accountBean.id}"></h:inputHidden>
							<div class="feild-input">
								<h:outputLabel value="CardNumber"></h:outputLabel>
								<p:inputMask mask="9999999999" value="#{accountBean.cardNumber}"
									maxlength="" style="width:200px;">
									<p:ajax event="keyup" update="mess_cardnumber"></p:ajax>
								</p:inputMask>
							</div>
							<div class="feild-input">
								<h:outputText id="mess_cardnumber"
									value="#{accountBean.messInvaildCardNumber}"></h:outputText>
							</div>
							<div class="feild-input">
								<h:outputLabel value="Username"></h:outputLabel>
								<p:inputText value="#{accountBean.userName}"
									style="width:200px;" >
									<p:ajax event="keyup" update="mess_username"></p:ajax>
								</p:inputText>
							</div>
							<div class="feild-input">
								<h:outputText id="mess_username"
									value="#{accountBean.messExistUsername}"></h:outputText>
							</div>
							<div class="feild-input">
								<h:outputLabel for="pwd1" value="Password"></h:outputLabel>
								<p:password value="#{accountBean.password}"
									style="width:200px;" 
									promptLabel="Input your password" feedback="true">
								</p:password>

							</div>
							<div class="feild-input">
								<h:outputLabel  value="Re-password"></h:outputLabel>
								<p:password value="#{accountBean.rePassword}"
									style="width:200px;" >
								</p:password>
							</div>
							<div class="feild-action"
								style="margin-top: 10px !important; margin-bottom: 10px !important;">
								<p:commandButton id="ok_btn" value="Sign up"
									action="#{accountBean.insertAccUser}" update=":growl"></p:commandButton>
							</div>
						</h:panelGroup>
					</div>
				</h:form>
			</div>
		</div>
	</div>
	<ui:insert name="header">
		<ui:include src="/footer/footer_dth.xhtml" />
	</ui:insert>

</h:body>
</html>